import React from 'react';
import ReactDom from 'react-dom';
import Button from 'views/component/button/button';

import {
    api
} from 'js/api/api';
import playerStore from 'js/store/playerStore';
import iconData from 'js/data/iconData';
import './battleData.scss';


class BattleData extends React.Component {
    constructor() {
        super();
        let monstersConfig = window.totalConfig.monster;
        let montserAttrisConfig = totalConfig.other[290001].monsterTypes;
        console.log(montserAttrisConfig)
        this.state = {
            monsterId: Object.entries(monstersConfig)[0][0],
            monsterType: Object.entries(montserAttrisConfig)[0][0],
            lvl: 1,
            monster: null
        }
    }
    componentDidMount() {
        this.getData();
    }
    getData = () => {
        api('getMonsterFightAttri', { monsterId: parseInt(this.state.monsterId), monsterType: parseInt(this.state.monsterType), lvl: parseInt(this.state.lvl) }, (err, data) => {
            console.log(data)
            this.setState({ monsters: data.monster })
        });
    }
    getInfo = () => {
        let monsters = this.state.monsters;
        if (monsters) {
            let nodes = [];
            for (let [key, monster] of Object.entries(monsters)) {
                let fightAttri = monster.fightAttri;
                nodes.push(<div className="info" key={key}>
                    <div>名字:{monster.name}</div>
                    <div>生命:{fightAttri.maxHp}</div>
                    <div>攻击:{fightAttri.attack}</div>
                    <div>物防:{fightAttri.pdef}</div>
                    <div>法防:{fightAttri.ldef}</div>
                    <div>暴击:{fightAttri.crit}</div>
                    <div>暴伤:{fightAttri.critHurt}</div>
                    <div>恢复:{fightAttri.recover}</div>
                    <div>护盾:{fightAttri.shield}</div>
                    <div>速度:{fightAttri.speed}</div>
                    <div>韧性:{fightAttri.toughness}</div>
                    <div>守护:{fightAttri.guard}</div>
                </div>)
            }
            return nodes;
        }
    }
    onChange = (value, type) => {
        this.state[type] = value;
        this.setState({}, () => {
            this.getData()
        })
    }
    render() {
        let monstersConfig = window.totalConfig.monster;
        let montserAttrisConfig = totalConfig.other[290001].monsterTypes;
        let monsterNode = [], montserAttrisNode = [], lvlNode = [];
        for (let [key, value] of Object.entries(monstersConfig)) {
            monsterNode.push(<option value={key} key={key}>{value.name}</option>);
        }
        for (let [key, value] of Object.entries(montserAttrisConfig)) {
            montserAttrisNode.push(<option value={key} key={key}>{value.name}</option>);
        }
        for (let i = 1; i <= 10; i++) {
            lvlNode.push(<option value={i} key={i}>{i}</option>);
        }
        return <div id="battleData" >
            <div className="flex">
                <div>怪物<select onChange={(e) => { this.onChange(e.target.value, 'monsterId'); }}>
                    {monsterNode}
                </select>
                </div>
                <div>位置<select onChange={(e) => { this.onChange(e.target.value, 'monsterType'); }}>
                    {montserAttrisNode}
                </select>
                </div>
                <div>等级<select onChange={(e) => { this.onChange(e.target.value, 'lvl'); }}>
                    {lvlNode}
                </select>
                </div>
                <Button onClick={this.getData}>确定</Button>
            </div>
            <div className="flex wrap">
                {this.getInfo()}
            </div>
        </div>
    }
}

export default BattleData;